<template>
		<div :key="keyNum" ref="childHome">
			<!--内容区域根据nav bar id 请求当前页面的数据-->
			<Banner v-if="bannerImages.length>0" :bannerImages ='bannerImages'/>
			<LivePreviewCom v-if="previewList.length>0" :previewList='previewList'/>
			<GreatVideoCom v-if="greatViewList.length>0" :title="'精彩视频'" :greatViewList='greatViewList'/>
			<AdvertisingCom v-if="adImages.length>0" :adImages='adImages'/>
			<!-- 北大湖雪场 室内滑雪。。。。只有在第一个tab下展示 -->
			<div v-for="(item,i) in recDisplayList" :key="i" v-show="firstTab"> 
				<GreatVideoCom :title="item.title" :greatViewList='item.showLocationVideos' :isMore="'true'" @more="more(item)"/>
			</div>
			<van-list
				v-model="loading"
				:immediate-check = 'false'
				:finished="finished"
				finished-text="—   没有更多了  —"
				@load="onLoad"
				>
			<GreatVideoCom v-if="hotViewList.length>0" :title="'热门推荐'" :greatViewList='hotViewList'/>
				</van-list>
				<Disclaimer v-if="finished"></Disclaimer>
		</div>
		
</template>

<script>
	import Banner from '../components/banner';//banner组件
	import LivePreviewCom from '../components/livePreviewCom';//直播预告组件
	import GreatVideoCom from '../components/greatVideoCom';//精彩视频组件
	import AdvertisingCom from '../components/advertisingCom';//广告位组件
	import Disclaimer from '../components/Disclaimer';//免责声明组件
	export default {
		components: {
			Banner,
			LivePreviewCom,
			GreatVideoCom,
			AdvertisingCom,
			Disclaimer
		},
		props:{
			homeData:Array,
			recDisplayList:Array,//推荐为数据
			firstTab:true,
			channelId:null,//当前tabId,
			loading:false,
            finished: true,
			loadHotViewList:[]
		},
		data() {
			return {
				bannerImages:[],//轮播图
				previewList:[],//直播预告
				greatViewList:[],//精彩视频
				adImages:[],//广告图
				hotViewList:[],//热门推荐
				keyNum:0,//点击tab页面从上到下展示
				
			}
		},
		computed: {

		},
		created() {
              this.$store.dispatch("showNav");
		},
		mounted(){
			
		},
		methods: {
			getHomeDaTa(list){
				    list.map(item=>{//elementType 1 轮播图 2 直播预告 3 精彩视频 4 广告位 5 热门推荐 6 短视频
						if(item.elementType == '1'){
                          this.bannerImages = item.data
						}else if(item.elementType == '2'){
							let {live,pre_live} = item.data
                            this.previewList = live.concat(pre_live);
							window.sessionStorage.setItem("previewList", JSON.stringify(this.previewList))
						}else if(item.elementType == '3'){
                            this.greatViewList = item.data.length>4 ? item.data.slice(0,4) : item.data
						}else if(item.elementType == '4'){
                            this.adImages = item.data
						}if(item.elementType == '5'){
                            // this.hotViewList = [] //直接从热门推荐接口取
						}if(item.elementType == '6'){
                            this.shortVideoList = item.data
						}

					})
			},
			onLoad(){
				this.$emit('onLoad','数据加载中')		
			},
			more(data){
				this.$emit("navCom", {type:'active',data,info:'当前选中tab'});
			}
		},
		watch:{
			homeData(val){
				if(val){
					//渲染之前清空
					 this.bannerImages=[];
                     this.previewList =[];  
					 this.greatViewList =[];
					 this.adImages = [];
					 this.shortVideoList =[];
					 this.getHomeDaTa(val);
				     this.keyNum++;
				}
				
			},	
			loadHotViewList(newVal,oldVal){
				if(newVal){
					this.hotViewList = newVal
				}
			}
		}
	}
</script>


<style scoped="scoped">
</style>